import 'package:flutter/material.dart';

class FlexPage extends StatelessWidget {
  const FlexPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flex 全属性示例'),
      ),
      body: Center(
        child: Container(
          color: Colors.grey.shade200,
          height: 300,
          width: 300,
          child: Flex(
            direction: Axis.vertical, // 主轴方向：Axis.horizontal 或 Axis.vertical
            mainAxisAlignment: MainAxisAlignment.spaceAround, // 主轴对齐方式
            crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐方式
            mainAxisSize: MainAxisSize.max, // 主轴尺寸：min or max
            verticalDirection: VerticalDirection.down, // 子元素纵向排列方向
            textDirection: TextDirection.ltr, // 文本方向（影响 start/end）
            clipBehavior: Clip.hardEdge, // 超出部分的裁剪行为
            children: [
              Flexible(
                flex: 2,
                fit: FlexFit.tight,
                child: Container(
                  color: Colors.red,
                  height: 50,
                  child: const Center(child: Text('子项 1')),
                ),
              ),
              Flexible(
                flex: 1,
                fit: FlexFit.loose,
                child: Container(
                  color: Colors.green,
                  height: 50,
                  child: const Center(child: Text('子项 2')),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.blue,
                  height: 50,
                  child: const Center(child: Text('子项 3')),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
